import Vue from 'vue';
import App from './App.vue';

import hljs from 'highlight.js';
import marked from "marked";

import './assets/style/index.scss';
import router from './routers';
import utils from "./utils/utils";

import { w3cwebsocket } from "websocket";

Vue.use(hljs);

window.$utils = utils;
window.marked = marked;
window.W3CWebSocket = w3cwebsocket;

//封装成一个指令,highlight是指令的名称
Vue.directive('highlight', (el) => {
	let blocks = el.querySelectorAll('pre code');
	blocks.forEach((block) => {

	// 创建ol标签元素
	let ol = document.createElement("ol");

	// 2.根据换行符获取行数，根据获取的行数生成行号
	const partList = block.innerHTML.split('\n');
	for (const part of partList) {
	// let rowCount = html.split('\n').length;
	// for(let i=1;i < rowCount;i++){
		// 创建li标签元素
		let li = document.createElement("li");
		// 将生成的行号添加到li标签中
		li.innerHTML = part;
		// li.appendChild(text);
		// 将li标签添加到ol标签中
		hljs.highlightBlock(li);
		ol.appendChild(li);
	}
	// 为ol标签添加class名
	block.innerHTML = ol.outerHTML;
	});
});

new Vue({
	router,
	render: h => h(App)
}).$mount('#app');
